<template>
  <a-row>
  <!-- 左边列 -->
   <a-col :span="6">
    <!-- 页面标题区 -->
    <a-row  class="page-content-header">
      <span class="title">{{routeName}}&nbsp;&nbsp;&nbsp;<plus-outlined @click="showPlusModal"/></span>
    </a-row>

    <!-- 页面内容区 -->
    <a-row>
    <span class="ant-dropdown-link" @click.prevent>
      <CaretDownOutlined />预置角色
    </span>
    </a-row>

   </a-col>
   <!-- 右边列 -->
   <a-col :span="18">

      <a-collapse v-model:activeKey="activeKey" ghost style="padding-top: 30px;" >
        <template #expandIcon="{ isActive }">
          <PlusSquareOutlined v-if="!isActive"  style="font-size: 18px;margin-top: 6px;"></PlusSquareOutlined>
          <MinusSquareOutlined v-if="isActive"  style="font-size: 18px;margin-top: 6px;"></MinusSquareOutlined>
        </template>

        <a-collapse-panel :key="set.key" v-for="set in roleSetList">

          <template #header>
            <a-col :span="22"  style="font-size: 18px;">
              &emsp;&emsp;&nbsp;{{set.name}}
            </a-col>
            <a-col :span="1"  style="font-size: 20px;color: rgb(142, 1, 219);">
            <UserAddOutlined  style="size: 18px;" @click="showPlusModal"/></a-col>
          </template>

          <a-row style="background-color: rgba(242, 242, 242, 0.627);width: 100%;height: 60px;padding-left: 50px;">
            <a-col style="margin-left: 10px;font-size: 12px;padding-top: 10px;" v-for="children in set.children" >
              <div style="background-color: rgb(0, 0, 0);border-radius:5px;color: white;padding-left: 6px;font-weight: bold;">
                {{ children.role }}
                <a-tag color="rgb(104, 124, 164)" style="margin:5px;font-weight: 400;">{{children.tag}}</a-tag>
              </div>
            </a-col>

          </a-row>
        </a-collapse-panel>

      </a-collapse>

    </a-col>
  </a-row>
  <a-modal width="700px" v-model:visible="plusVisible" centered="true" title="新增角色" @ok="handlePlusOk">
    <template #footer>
      <a-button key="plusback" @click="handlePlusCancel">关闭</a-button>
      <a-button key="plussubmit" type="primary" :loading="plusLoading" @click="handlePlusOk">确定</a-button>
    </template>

    <a-form :model="formState" name="function_add">
      <a-row style="margin-bottom: 60px;margin-top: 30px;">
        <a-col :span="6"  style="text-align: right;font-weight: bold;font-size: 16px;">角色编号:&nbsp;&nbsp;</a-col>
      <a-col :span="12">
        <a-input  placeholder="请输入功能编号" size="middle"></a-input>
      </a-col>
      </a-row>
      <a-row style="margin-bottom: 60px;">
        <a-col :span="6"  style="text-align: right;font-weight: bold;font-size: 16px;">角色名称:&nbsp;&nbsp;</a-col>
        <a-col :span="12"  style="font-weight: bold;font-size: 16px;">
          <a-input  placeholder="请输入功能名称" size="middle"></a-input>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { ref } from 'vue';
import { PlusSquareOutlined,MinusSquareOutlined, UserAddOutlined } from '@ant-design/icons-vue';
const route = useRoute(); // 使用 Vue Router 的钩子函数 useRoute 获取当前路由对象
// 计算属性，获取当前路由的元数据中的标题
const routeName = computed(() => route.meta.title);

const showIcon = ref(false);

const plusLoading = ref (false);
const plusVisible = ref(false);

    const showPlusModal = () => {
      plusVisible.value = true;
    };
    const handlePlusOk = () => {
      plusLoading.value = true;
      setTimeout(() => {
        plusLoading.value = false;
        plusVisible.value = false;
      }, 2000);
    };
    const handlePlusCancel = () => {
      plusVisible.value = false;
    };

const onSelect= (selectedKeys, info) => {
      console.log('selected', selectedKeys, info);
    };

const roleSetList = [
  {
    key: 1, name: "零售管理平台(3)", children:
      [{ role: "管理员", tag: 999 },{ role:"员工",tag:30}, { role:"游客",tag:25}]
  },
  { key: 2, name: "群客多(2)" , children:
      [{ role: "客服", tag: "server" },{ role:"游客",tag:"gust"}]},
  { key: 3, name: "AI称管理平台(2)", children:
      [{ role: "创迹管理员", tag: "cuangjiadmin" },{ role:"默认厂商",tag:"changshangdefalut"}] },
]

</script>

<style lang="less" scoped>

.container {
  display: flex;
  height: 100%;
  padding-top: 120px;
  flex-direction: column;
  align-items: center;
  .login-bg {
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0.5;
    width: 100%;
    height: 100%;
  }
  .console-card{
  height: 40vh;
  width: 40%;
  margin-top: -3%;
  border: 3px solid #969696;
  box-shadow: 0 0 10px rgba(40, 40, 40, 0.5);
  }

}
.page-content-header{
  padding: 42px 24px 16px 60px;
}
.title {
      display: block;
      float: left;
      margin-bottom: 0;
      padding-right: 12px;
      color: rgba(0, 0, 0, 0.85);
      font-weight: 600;
      font-size: 24px;
      line-height: 32px;
    }
    .ant-dropdown-link{
    height: 30px;
    width: 84px;
    padding-left: 4px;
    margin-top: 18px;
    margin-left: 60px;
    font-size: 18px;
    color: black;
    background-color: rgb(184, 241, 253);
}
</style>
